<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情</title>

    <!-- 重置样式 -->
    <link rel="stylesheet" href="../css/normalize.css">

    <!-- 公共样式 -->
    <link rel="stylesheet" href="../css/common.css">

    <!-- 引入插件样式 -->
    <link rel="stylesheet" href="../css/jquery.exzoom.css">

    <!-- 当前页样式 -->
    <link rel="stylesheet" href="../css/product-details.css">

    <!-- jQuery -->
    <script src="../lib/jquery.min.js"></script>

    <!-- 放大镜插件 -->
    <script src="../lib/jquery.exzoom.js"></script>

    <!-- 当前页js -->
    <script src="../js/productDetails.js"></script>
</head>

<body>
    <!-- 页头 -->
    <div class="header">
        <div class="container-fluid bgc000">
            <div class="container clearfix head-top">
                <p class="fl tein">legochina.cn</p>
                <p class="fr">欢迎光临<a href="#">乐购</a>，请 <a href="../html/register.html" target="-blank">登陆</a>\<a
                        href="../html/register-form.html" target="-blank">注册</a></p>
                <h1><a href="../html/index.html" target="-blank"><img src="../imgs/product-details.jpg" alt=""></a></h1>
            </div>
        </div>
        <div class="container clearfix head-right search-box">
            <p class="fr shop-box">
                <a href="../html/shopcar.html" target="-blank" class="shop-car">购物车<span>3</span></a>
                <a href="" class="shop-msg">我的订单</a>
            </p>
            <form action="" class="fr head-search">
                <input class="head-text" type="text" placeholder="设计中的设计  原研哉">
                <input class="head-btn" type="submit" value="">
            </form>
        </div>
        <div class="container head-nav clearfix">
            <ul class="fr">
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意玩具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </div>

    <!-- 图书详情表头 -->
    <div class="container-fluid proDetail p20 bgcf3 bs">
        <p class="container">
            <a href="#">图书</a>>
            <a href="#">小说</a>>
            <a href="#">情感/家庭/婚姻</a>>
            <a href="#">博集天卷</a>>
            <a href="#">她和他</a>
        </p>
        <div class="container clearfix bgcfff bs">

            <!--放大镜-->
            <div class="exzoom fl" id="exzoom">
                <!--大图区域-->
                <div class="exzoom_img_box">
                  <ul class='exzoom_img_ul'>
                    <li><img src="../imgs/a1.png" /></li>
                    <li><img src="../imgs/a2.png" /></li>
                    <li><img src="../imgs/a3.png" /></li>
                    <li><img src="../imgs/a4.png" /></li>
                    <li><img src="../imgs/a5.png" /></li>
                    <li><img src="../imgs/a1.png" /></li>
                    <li><img src="../imgs/a2.png" /></li>
                    <li><img src="../imgs/a3.png" /></li>
                  </ul>
                </div>
                <!--缩略图导航-->
                <div class="exzoom_nav"></div>
                <!--控制按钮-->
                <p class="exzoom_btn"> <a href="javascript:void(0);" class="exzoom_prev_btn"> &lt; </a> <a
                    href="javascript:void(0);" class="exzoom_next_btn"> &gt; </a> </p>
              </div>

            <!--图书详情-->
            <div class="fr bookdetail marl10">
                <div class="p1020">
                    <h2 class="f20">她和他</h2>
                    <p class="clf42">《偷影子的人》作者马克·李维重磅新作，法国连续60周在榜，销量突破120万册</p>
                    <p class="line40">[法] 马克·李维 著；杨亦雨 译</p>
                </div>
                <div class="bgcccc p1020 priceDel mag10">
                    <p>
                        <span>乐 购 价：</span>
                        <span class="clf42 f20">&yen;26.20</span> <span>[6.9折] </span>
                        <span>[定价：￥38.00]</span>
                        <span>(降价通知)</span>
                    </p>
                    <p>
                        <span>促销信息：</span>
                        <span class="clf42 f12">满减 每满150.00元，可减50.00元现金</span>
                        <a href="#">详情 >></a>
                    </p>
                    <p>
                        <span>领 券：</span>
                        <i>100-6</i>
                        <i>200-50</i>
                    </p>
                    <p class="evaluation">
                        <span>累计评价</span>
                        <span class="bgf60">10000</span>
                    </p>
                </div>
                <p class="p1020 catCheck pa30">
                    <span>种类选择：</span>
                    <b>平装版</b>
                    <b>精装版</b>
                    <b>豪华版</b>
                </p>

                <div class="clearfix p1020 mag30">
                    <div class="proNum fl">
                        <input class="printnum" type="text" value="1">
                        <a id="addNum">+</a>
                        <a id="reNum">-</a>
                    </div>
                    <p class="addCar fl"><a class="clff" href="../html/shopcar.html" target="-blank">加入到购物车</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 人气单品 -->
    <div class="container sale mag30">
        <div class="sale-top">
            <span class="fs22">人气单品</span>
        </div>
        <ul class="clearfix">
            <script>
                for (let i = 0; i < 5; i++) {
                    document.write(`
                        <li>
                            <img src="../imgs/22935553-1_l.jpg" alt="">
                            <img src="../imgs/index05_18.jpg" alt="">
                            <p class="fs13">白夜行 东野圭吾</p>
                            <img class="mt5" src="../imgs/推荐.jpg" alt="">
                            <p class="mt10"><span class="clf42">￥38</span>&nbsp;&nbsp;&nbsp;<del class="clb3 del">￥58</del></p>
                        </li>
                        `)
                }
            </script>
        </ul>
    </div>

    <!-- 页尾广告图 -->
    <div class="container monster mag30"></div>

    <!-- 顶部搜索框 -->
    <div class="fix-top"></div>

    <!-- 页尾 -->
    <div class="footer">
        <div class="re-title bgf60">
        </div>
        <div class="container-fluid footer-big">
            <div class="container footer-center">
                <span><img src="../imgs/222_11.png" alt=""></span>
                <span><img src="../imgs/222_13.png" alt=""></span>
                <span><img src="../imgs/222_15.png" alt=""></span>
                <span><img src="../imgs/222_17.png" alt=""></span>
            </div>
        </div>
        <div class="container footer-nav clearfix">
            <div>
                <h4><a href="#">购物指南</a></h4>
                <p><a href="#">购物流程</a></p>
                <p><a href="#">发票制度</a></p>
                <p><a href="#">账户管理</a></p>
                <p><a href="#">会员优惠</a></p>
            </div>
            <div>
                <h4><a href="#">支付方式</a></h4>
                <p><a href="#">货到付款</a></p>
                <p><a href="#">网上支付</a></p>
                <p><a href="#">礼品卡支付</a></p>
                <p><a href="#">银行转帐</a></p>
            </div>
            <div>
                <h4><a href="#">订单服务</a></h4>
                <p><a href="#">订单配送查询</a></p>
                <p><a href="#">订单状态说明</a></p>
                <p><a href="#">自助取消订单</a></p>
                <p><a href="#">自助修改订单</a></p>
            </div>
            <div>
                <h4><a href="#">退换货</a></h4>
                <p><a href="#">退换货政策</a></p>
                <p><a href="#">自助申请退换货</a></p>
                <p><a href="#">退换货进度查询</a></p>
                <p><a href="#">退款方式和时间</a></p>
            </div>
            <div>
                <h4><a href="#">商家服务</a></h4>
                <p><a href="#">商家中心</a></p>
                <p><a href="#">运营服务</a></p>
                <p><a href="#">加入尾品汇</a></p>
            </div>
            <div>
                <img src="../imgs/logo_00.png" alt="">
            </div>
        </div>
        <p>公司简介 | Investor Relations | 网站联盟 | 乐购招商 | 机构销售 | 手机乐购 | 官方Blog | 热词搜索</p>
        <p>Copyright (C) 乐购网 2004-2016, All Rights Reserved</p>

    </div>
</body>

</html>